export default class Snake {
  // 表示蛇的元素
  head: HTMLElement;
  body: HTMLCollection;
  //   获取蛇的容器
  element: HTMLElement;
  constructor() {
    this.head = document.querySelector("#snake>div") as HTMLElement;
    this.element = document.getElementById("snake")!;
    this.body = this.element.getElementsByTagName("div")!;

  }
  //   获取蛇头的x坐标
  getX() {
    return this.head.offsetLeft;
  }
  //   获取蛇头的y坐标
  gety() {
    return this.head.offsetTop;
  }
  //   设置蛇头x坐标
  setX(value: number) {
    if (this.getX() == value) {
      return
    }
    //  判断是否撞墙
    if (value < 0 || value > 290) {
      //  说明撞墙
      throw new Error("蛇撞墙了");
    }
    // 修改x轴即修改水平坐标，蛇在向右走的时候不能向左调头
    //  判断蛇头的坐标和身体的第一个（即第二节）坐标重复，就是调头操作
    if (this.body[1] && (this.body[1] as HTMLElement).offsetLeft === value) {
      console.log("水平方向发生调头");
      //   如果发生了调头，应该向反方向继续移动
      if (value > this.getX()) {
        // 如果新值value>旧值x,说明蛇在向右走，此时发生了调头，应该使蛇继续向左走
        value = this.getX() - 10
      } else {
        value = this.getX() + 10
      }
    }

    //  移动身体  
    this.moveBody()
    this.head.style.left = value + "px";
    //  检查蛇头撞到身体
    this.checkHeadBody()
  }
  //   设置蛇头Y坐标
  setY(value: number) {
    if (this.gety() == value) {
      return
    }
    //  判断是否撞墙
    if (value < 0 || value > 290) {
      //  说明撞墙
      throw new Error("蛇撞墙了");
    }
    // 修改y轴即修改垂直坐标，蛇在向下走的时候不能向上调头
    //  判断蛇头的坐标和身体的第一个（即第二节）坐标重复，就是调头操作
    if (this.body[1] && (this.body[1] as HTMLElement).offsetTop === value) {
      console.log("垂直方向发生调头");
      //   如果发生了调头，应该向反方向继续移动
      if (value > this.gety()) {
        // 如果新值value>旧值x,说明蛇在向下走，此时发生了调头，应该使蛇继续向上走
        value = this.gety() - 10
      } else {
        value = this.gety() + 10
      }
    }
    //  移动身体
    this.moveBody()
    this.head.style.top = value + "px";
    //  检查蛇头撞到身体
    this.checkHeadBody()
  }
  //   设置she增加身体
  addBody(): void {
    this.element.insertAdjacentHTML("beforeend", " <div></div>");
  }
  //  蛇身体移动方法
  moveBody() {
    /**  
     * 将后边身体的位置改未前边身体的位置
     *     第 4 节 = 第 3 节的位置
     *     第 3 节 = 第 2 节的位置
     *     第 2 节 = 第 1 节的位置
     *     第 1 节 = 蛇头移动位置
    */
    //   遍历获取所有身体
    console.log("this.body.length", this.body.length);

    for (let i = this.body.length - 1; i > 0; i--) {
      let X = (this.body[i - 1] as HTMLElement).offsetLeft;
      let Y = (this.body[i - 1] as HTMLElement).offsetTop;
      (this.body[i] as HTMLElement).style.left = X + "px";
      (this.body[i] as HTMLElement).style.top = Y + "px";

    }

  }
  //  检查舌头是否撞到自己身体
  checkHeadBody() {
    //  获取所有身体，检查是否和蛇头坐标重合
    for (let i = 1; i < this.body.length; i++) {
      let x = (this.body[i] as HTMLElement).offsetLeft
      let y = (this.body[i] as HTMLElement).offsetTop
      if (x === this.getX() && y === this.gety()) {
        throw new Error("撞到自己了");
      }

    }
  }
}
